<template>
  <div class="tap">
    <i></i>
    {{title}}
    <span class="tap-tip" :style="{color:color}" @click="tapClick()">{{tip}}</span>
  </div>
</template>

<script>
  export default {
    props: {
      title:{
        type:String,
        default:""
      },
      tip:{
        type:String,
        default:""
      },
      color:{
        type:String,
        default:"#999"
      }
    },
    name: "Tap",
    methods:{
      tapClick(){
        this.$emit("tap",this.title)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .tap {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: .44rem;
    margin-top: .12rem;
    padding: 0 .16rem;
    font-weight: 500;
    font-size: .17rem;
    line-height: .44rem;
    background: #fff;
    border-bottom: .005rem solid #ebebeb;
    i {
      display: inline-block;
      width: .04rem;
      height: .16rem;
      margin-right: .08rem;
      vertical-align: middle;
      background: #f43f3f;
    }
    .tap-tip {
      flex: 1 1;
      font-weight: 400;
      font-size: .14rem;
      text-align: right;
    }
  }
</style>
